// 文件上传
<template>

<div class="file-upload">

    <!-- 附件下载 -->
    <a href="" class="downloadLink" download="" ref='downloadLink'></a>
    
    <div class="file-container">
            
        <div class="file-item" :class='{hasFile: !!mod.url}' v-for='(mod, index) of modsCache' :key='index'>
            
            <!-- 操作工具 -->
            <div class="file-tools-bar">

                <h4 class="title">
                    {{mod.title}}
                </h4>

                <div class="btn-group" >
                    <div class="btn-box">
                        <c-btn-icon class="btn " type='primary text' icon='icon-img1' @click='openFile(index)'></c-btn-icon>
                        <c-btn-icon class="btn download" type='primary text' icon='icon-top' @click='downloadFile(index)'></c-btn-icon>
                        <c-btn-icon class="btn delete" type='danger text' icon='icon-close' @click='deleteFile(index)' v-if='!disabled'></c-btn-icon>
                    </div>
                </div>
                
            </div>

            <div class="file-content">

                <!-- 缩略图 -->
                <div class="img-box" v-if='disabled'>

                    <div class="icon-box" v-if='!mod.url'>
                        <span class="icon iconfont icon-close"></span>
                    </div>
                    <img v-else :src="pathPrefix + mod.url" alt="mod.title">
                    
                </div>
                
                <!-- 上传控件 -->
                <Upload v-else :action='uploadPath' :on-success='success(index)' :on-error='error(index)'>

                    <div class="icon-box" v-if='!mod.url'>
                        <span class="icon iconfont icon-add"></span>
                    </div>

                    <div class="img-box" v-else>
                        <img :src=" pathPrefix + mod.url" alt="mod.title">
                    </div>
                
                </Upload>
                
            </div>
            
        </div>
        
    </div>
</div>

</template>

<script lang='ts'> 
import {Component, Prop, Watch, Vue} from 'vue-property-decorator'
import servicePath from '@/components/ivew_conf/car_upfile_path_prefix'


@Component({})
export default class fileUpload extends Vue{
    name:string = 'file-upload'

    // 路径前缀
    @Prop({
        default: servicePath
    })
    pathPrefix:string

    // 上传地址
    @Prop({
        default: 'http://fileserver.kbao360.com/upload/form'
    })
    uploadPath:string

    // 模块配置
    @Prop()
    mods:formInf.uploadFile[]

    // 是否可用
    @Prop()
    disabled:boolean

    @Watch('mods')
    onModsChange(newVal, oldVal){
        this.modsCache = newVal;
    }

    // 配置缓存， 动态修改配置数据
    modsCache = this.mods
    
    // index 操作项编号 response 请求返回  file 上传文件 fileList 上传文件列表
    success (index){
        
        let vue = this;
        return (response, file, fileList)=>{
            vue.$emit('success', {
                index,
                modsCache: vue.modsCache,

                response,
                file,
                fileList
            })            
        }
    }

    // 失败报错
    error(index){

        let vue = this;
        return (response, file, fileList)=>{
             vue.$emit('error', {
                index,
                modsCache: vue.modsCache,

                response,
                file,
                fileList
            })     
        }
    }  

    // 全图
    openFile(index){
        let url = this.pathPrefix + this.modsCache[index].url;
        window.open(url);
    }
    
    // 下载
    downloadFile(index){
        let vue = this;
        let ele:any = <HTMLElement>this.$refs['downloadLink'];
        
        ele.href = this.pathPrefix +  this.modsCache[index].url;

        var evObj = document.createEvent('MouseEvents');
        evObj.initMouseEvent( 'click', true, true, window, 0, 0, 0, 0, 0, false, false, true, false, 0, null);
        ele.dispatchEvent(evObj);
        
        
        this.$emit('downloadFile', {
            index,
            modsCache: vue.modsCache,
        })
    }

    // 删除
    deleteFile(index){
        let vue = this;
        
        this.$emit('deleteFile', {
            index,
            modsCache: vue.modsCache,
        })
    }
    
}


</script>

<style scoped lang='scss'>

.file-upload{}

.file-container{

    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: _rem(20px);
    
}

.file-item{
    $size: _rem(180px);
    flex: 0  $size;
    overflow: hidden;
    position: relative;
    
    margin-top: _rem(20px);
    width: $size;
    height: $size;
    border-radius: $border-radius;
    box-shadow: $default_shadow;
    transition: all $transition_time;
    
    
    &.hasFile:hover{

        
        .file-tools-bar{
                
            .title{
                flex: 1 1;
                text-align: left;
            }
            .btn-group{
                flex: 1 1;
                opacity: 1;
            }
        }
       
       
    }
    
    .file-tools-bar{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        
        margin: _rem(4px);
        padding: _rem(4px) _rem(6px);
        height: _rem(30px);
        border-radius: $border-radius;
        background: $block_bg_color;
        
        z-index: 20;

        .title,
        .btn-group{
            transition: all $transition_time;
        }

        .title{
            flex: 0 100%;
            font-weight: 600;
            font-size: $font_small;
            text-align: center;
        }

        .btn-group{
            flex: 0 0;
            overflow: hidden;
            opacity: 0;
            text-align: right;
        }
        
        .btn-box{
            float: right;
            width: _rem(90px);
        }
        
        .btn + .btn{
            font-size: $font_mini;
        }
        
    }
    
    .file-content{
        position: relative;
        height: 100%;
        
    }

    .icon-box{
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;

        margin: auto;
        box-sizing: border-box;
        background: $default_bg;
        
        text-align: center;
        z-index: 2;

        .icon{
            $size: _rem(40px);
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;

            margin: auto;
            width: $size;
            height: $size;
            font-size: _rem(40px);
            text-shadow: $default_shadow;
        }
    }
    
    .img-box{
        @extend %img_box_w;
        position: absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;

        margin: auto;
        height: 100%;
        z-index: 10;

    }
    
    .downloadLink{
        display: none;
        z-index: -1;
    }
}

</style>